<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/dist/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/bootstrap.min.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="demoTable">
    <button type="button" class="layui-btn" id="addFile">
        <i class="layui-icon">&#xe654;</i>新建文件夹
    </button>
    <button type="button" class="layui-btn layui-btn layui-btn-warm" id="uploadFile">
        <i class="layui-icon">&#xe67c;</i>上传文件
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="removeFile">
        <i class="layui-icon">&#xe640;</i>批量删除
    </button>
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


<script type="text/html" id="barDemo">
    <a lay-event="preview" title="预览"><i class="layui-icon layui-icon-layer" style="font-size: 20px;"></i></a>
    <a lay-event="download" title="下载"><i class="layui-icon layui-icon-download-circle" style="font-size: 20px;"></i></a>
    <a lay-event="share" title="分享"><i class="layui-icon layui-icon-share" style="font-size: 20px;"></i></a>
    <a lay-event="star" title="收藏"><i class="layui-icon layui-icon-star-fill" style="font-size: 20px;"></i></a>
    <a lay-event="edit" title="重命名"><i class="layui-icon layui-icon-edit" style="font-size: 20px;"></i></a>
    <a lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete" style="font-size: 20px;"></i></a>
    <a lay-event="tips" title="查看"><i class="layui-icon layui-icon-tips" style="font-size: 20px;"></i></a>
</script>

<div id="addFloderDiv">
    <div style=" margin: 0 auto;width:60%;margin-top:50px">
        <input type="text" name="floder" id="floder" placeholder="请输入文件夹名称" class="layui-input">
        <div style="text-align: center;margin-top: 30px">
            <button type="button" class="layui-btn layui-btn-normal" id="checkFloderBtn" >立即创建</button>
        </div>
    </div>
</div>

<div id="showFileDetailsDiv">
    <div style=" margin: 0 auto;width:60%;margin-top:50px">
        文件名：
        文件大小：
        文件类型：
    </div>
</div>


<script src="layui/dist/layui.js" charset="utf-8"></script>
<script src="layer/layer.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/html" id="filenameDev">
    {{# if(d.fileType=='文件夹'){ }}
    <i class="glyphicon glyphicon-folder-close" style="color: #F0DA72;font-size:16px;"></i>&nbsp;{{d.fileName}}
    {{# }else{ }}
    <i class="glyphicon glyphicon-file" style="color: #A9A9A9;font-size:16px;"></i>&nbsp;{{d.fileName}}
    {{# } }}
</script>
<script th:inline='none'>
    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.$;
        $("#addFloderDiv").hide();
        $("#showFileDetailsDiv").hide();
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: 'getAllFile'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'fileName', title: '文件名', templet: '#filenameDev'}
                , {field: 'uploadTime', title: '上传时间', width: 300, sort: true, templet: "<div>{{layui.util.toDateString(d.uploadTime,'yyyy-MM-dd HH:mm:ss')}}</div>"}
                , {field: 'fileSize', title: '文件大小', width: 200, sort: true}
                , {field: 'fileType', title: '文件类型', width: 200, sort: true}
                , {field: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
            , id: 'testReload'
            , parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                $("parentId").val(0);
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val(),
                            parentId: 0
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#addFile").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '300px'], //宽高
                content: $("#addFloderDiv")
            });
        });
        $("#checkFloderBtn").click(function () {
            var floder = $("#floder").val();
            var parentId = $("#parentId").val();
            if (floder == "") {
                layer.alert("请给文件夹起个名字吧！");
            } else {
                $.ajax({
                    url: 'insertFloder',
                    type: "get",
                    data: {fileName: floder, parentId: parentId},
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                title: '提示信息'
                                , content: '文件夹创建成功'
                                , btn: ['确定']
                                , yes: function () {
                                    window.location.reload();
                                }
                            })
                        } else {
                            layer.alert(res.msg);
                        }
                    },
                    error: function () {
                        layer.alert("系统出错，请联系管理员")
                    }
                })
            }
        })

        table.on('tool(user)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if (layEvent === 'download') {
                document.location.href = "download?fileAbsolute="+data.fileAbsolute;
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行吗', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                layer.alert('重命名');
            } else if (layEvent === 'share') {
                layer.alert('分享');
            } else if (layEvent === 'star') {
                layer.alert('收藏');
            } else if (layEvent === 'preview'){
                window.location.href = "preview";
            } else if (layEvent === 'tips'){
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['300px', '240px'], //宽高
                    content: $("#showFileDetailsDiv")
                });
            }
        });
    });

    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        var layer=layui.layer;

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadFile' //绑定元素
            ,url: 'uploadFile' //上传接口
            ,accept: 'file'
            ,done: function(res){
                if(res.code==0){
                    layer.open({
                        title: '提示信息'
                        ,content: '上传成功'
                        ,btn:['确定']
                        ,yes:function () {
                            window.location.reload();
                        }
                    })
                } else{
                    layer.alert(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.alert("系统出错，请联系管理员");
            }
        });
    });
</script>
</body>
</html>